<template>
    <div class="communication-counselor">
        <div class="not-communication" v-if="who==='2'&&len===0">
            <div>
                <div class="not-communication-text">企业暂未发起沟通</div>
                <div>您的简历成功投递，请及时联系该职位的企业顾问，了解更多进展</div>
            </div>
        </div>

        <div class="counselor-head" v-if="who==='1'">
            <el-col :span="6">顾问名称：{{counselor.name}}</el-col>
            <el-col :span="8">顾问电话：{{counselor.phone}}</el-col>
            <el-col :span="10">上班时间：{{counselor.time}}</el-col>
        </div>

        <div class="counselor-content" :class="who==='1'?'height-1':'height-2'">
            <RecordList ref="recordList"
                        class="records-scrollbar"
                        :who="who"
                        :comm-id="commId"
                        :to-id="toId"
                        :jrr-id="jrrId"
                        @new-msg="newMsg"
                        :decided-q="decidedQ"
            >
            </RecordList>
        </div>
        <div class="counselor-footer" @keyup.enter.exact="clickSend" @keyup.ctrl.enter.exact="addNewLine">
            <el-input :disabled="!canSendQ"
                      style="padding: 10px 10px 46px 20px;font-size: 14px"
                      maxlength="200"
                      type="textarea"
                      v-model="inputString"
                      placeholder="输入文字，最多200字"></el-input>
            <div class="counselor-footer-footer">
                按Ctrl+Enter换行，Enter发送
                <el-button :disabled="!canSendQ" style="font-size: 14px" @click="clickSend">发送</el-button>
            </div>
        </div>
    </div>
</template>

<script>
  import RecordList from './RecordList'
  import _subject from '../../assets/utils/subject'

  export default {
    props: {
      canSendQ: {
        type: Boolean,
        default: true
      },
      counselor: {
        type: Object,
        default() {
          return {
            name: '顾问姓名',
            phone: '顾问电话',
            time: '上班时间'
          }
        }
      },
      who: {
        type: String,
        default: '1'
      },
      len: {
        type: Number,
        default: 0
      },
      indexChange: {
        type: Number,
        default: 0
      },
      commId: {
        type: Number,
        default: 0
      },
      toId: {
        type: Number,
        default: 0
      },
      jrrId: {
        type: Number,
        default: 0
      },
      icon: {
        type: String,
        default: ''
      },
      decidedQ: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      indexChange: {
        immediate: true,
        handler(n) {
          console.log('clear unread', n)
          this.clearUnread()
        }
      }
    },
    data() {
      return {
        inputString: ''
      }
    },
    methods: {
      clearUnread() {
        const str = {
          'comid': String(this.commId),
          'type': 'CLEAR',
          'mainCom': 'talent',
          'mainUserId': String(_subject.getTalentId())
        }
        _subject.ws.next(str)
      },
      addNewLine() {
        this.inputString += '\n'
      },
      clickSend() {
        this.$refs.recordList.sendText(this.inputString)
        this.inputString = ''
      },
      newMsg(commId, unread) {
        this.$emit('new-msg', commId, unread)
      }
    },
    components: { RecordList }
  }
</script>

<style lang="scss" scoped>
</style>
